<template>
  <div>
    <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
      <el-tab-pane label="基本信息" name="first">
        <div style="padding-left: 300px">
          <el-form ref="ruleForm" :model="ruleForm" :rules="rules" label-width="100px" class="demo-ruleForm" size="mini">
            <el-form-item label="楼盘名称" prop="name" :inline-message="true">
              <el-input v-model="ruleForm.name" placeholder="楼盘名称" />
            </el-form-item>
            <el-form-item label="楼盘地址" prop="address" :inline-message="true">
              <el-input v-model="ruleForm.address" placeholder="楼盘地址" />
            </el-form-item>
            <el-form-item label="城市地区" prop="province" :inline-message="true">
              <el-select v-model="ruleForm.province" placeholder="省" @change="shch">
                <el-option
                  v-for="item in slist"
                  :key="item.regionId"
                  :label="item.regionName"
                  :value="item.regionId"
                />
              </el-select>
            </el-form-item>
            <el-form-item prop="city" :inline-message="true">
              <el-select v-model="ruleForm.city" placeholder="市" @change="quch">
                <el-option
                  v-for="item in citys"
                  :key="item.regionId"
                  :label="item.regionName"
                  :value="item.regionId"
                />
              </el-select>
            </el-form-item>
            <el-form-item prop="county" :inline-message="true">
              <el-select v-model="ruleForm.county" placeholder="区" @change="handleCircle">
                <el-option
                  v-for="item in countrys"
                  :key="item.regionId"
                  :label="item.regionName"
                  :value="item.regionId"
                />
              </el-select>
            </el-form-item>
            <el-form-item label="商圈">
              <el-checkbox-group v-model="ruleForm.sq">
                <el-checkbox v-for="city in circleList" :key="city.id" :label="city.id" :value="city.id">{{ city.name }}</el-checkbox>
              </el-checkbox-group>
            </el-form-item>
            <el-form-item label="地铁">
              <el-checkbox-group v-model="ruleForm.subways">
                <el-checkbox v-for="subway in subwayList" :key="subway.id" :label="subway.id" :value="subway.id">{{ subway.name }}</el-checkbox>
              </el-checkbox-group>
            </el-form-item>
            <el-form-item label="建筑面积">
              <el-input v-model="ruleForm.proportion" placeholder="建筑面积" style="width: 200px" />平方米
            </el-form-item>
            <el-form-item label="建筑类型">
              <el-checkbox-group v-model="ruleForm.buildingTypes">
                <el-checkbox label="1" name="1">平房</el-checkbox>
                <el-checkbox label="2" name="2">塔楼</el-checkbox>
                <el-checkbox label="3" name="3">塔楼结合</el-checkbox>
                <el-checkbox label="4" name="4">底层</el-checkbox>
                <el-checkbox label="5" name="5">多层</el-checkbox>
                <el-checkbox label="6" name="6">高层</el-checkbox>
              </el-checkbox-group>
            </el-form-item>
            <el-form-item label="社区类型" style="width: 200px">
              <el-select v-model="ruleForm.communityType" placeholder="请选择社区类型">
                <el-option label="1" value="1">经济社区</el-option>
                <el-option label="2" value="2">政治社区</el-option>
                <el-option label="3" value="3">文化社区</el-option>
                <el-option label="4" value="4">军事社区</el-option>
                <el-option label="5" value="5">特殊社区</el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="物业类型">
              <el-checkbox-group v-model="ruleForm.premisesTypes">
                <el-checkbox label="1" name="1">普通住宅</el-checkbox>
                <el-checkbox label="2" name="2">公寓</el-checkbox>
                <el-checkbox label="3" name="3">商住两用</el-checkbox>
                <el-checkbox label="4" name="4">商业地产</el-checkbox>
                <el-checkbox label="5" name="5">写字楼</el-checkbox>
              </el-checkbox-group>
            </el-form-item>
            <el-form-item label="楼盘特色">
              <el-checkbox-group v-model="ruleForm.property">
                <el-checkbox v-for="subway in characterList" :key="subway.id" :label="subway.id">{{ subway.premisesProperty }}</el-checkbox>
              </el-checkbox-group>
            </el-form-item>
            <el-form-item label="容积率">
              <el-input v-model="ruleForm.grossPlotRatio" placeholder="容积率" style="width: 200px" />平方米
            </el-form-item>
            <el-form-item label="得房率">
              <el-input v-model="ruleForm.efficiency" placeholder="得房率" style="width: 200px" />%
            </el-form-item>
            <el-form-item label="绿化率">
              <el-input v-model="ruleForm.greenCoverage" placeholder="绿化率" style="width: 200px" />%
            </el-form-item>
            <el-form-item label="楼栋数">
              <el-input v-model="ruleForm.buildingCount" placeholder="楼栋数" style="width: 200px" />栋
            </el-form-item>
            <el-form-item label="开发商">
              <el-input v-model="ruleForm.developer" placeholder="开发商" />
            </el-form-item>
            <el-form-item label="物业管理公司">
              <el-input v-model="ruleForm.estate" placeholder="物业管理公司" />
            </el-form-item>
            <el-form-item label="楼盘地址">
              经度：<el-input v-model="ruleForm.longItude" readonly style="width: 200px" />
              纬度：<el-input v-model="ruleForm.latItude" readonly style="width: 200px" />
              <el-button @click="mapDialog=true">点击选择</el-button>
            </el-form-item>
            <el-form-item label="楼盘简介">
              <el-input v-model="ruleForm.introduce" style="width: 500px" type="textarea" :rows="2" placeholder="楼盘简介" />
            </el-form-item>
            <el-form-item label="周边配套">
              <el-button icon="el-icon-plus" type="warning" @click="addDomain">新 增</el-button>
            </el-form-item>
            <el-form-item
              v-for="(domain, index) in ruleForm.domains"
              :key="domain.key"
              :prop="'domains.' + index + '.value'"
            >
              标题：<el-input v-model="domain.value" style="width: 200px;" />
              内容：<el-input v-model="domain.content" style="width: 200px;" />
              <el-button type="danger" icon="el-icon-minus" @click.prevent="removeDomain(domain)" />
            </el-form-item>
            <el-form-item label="交通情况">
              <el-button icon="el-icon-plus" type="warning" @click="addSubway">新 增</el-button>
            </el-form-item>
            <el-form-item
              v-for="(domain, index) in ruleForm.subwayStatus"
              :key="domain.key"
              :prop="'domains.' + index + '.value'"
            >
              标题：<el-input v-model="domain.value" style="width: 200px;" />
              内容：<el-input v-model="domain.content" style="width: 200px;" />
              <el-button type="danger" icon="el-icon-minus" @click.prevent="removeSubway(domain)" />
            </el-form-item>
            <el-form-item>
              <!--            <el-button type="primary" @click="submitForm('ruleForm')">提交</el-button>-->
            </el-form-item>
          </el-form>
        </div>
      </el-tab-pane>
      <el-tab-pane label="相册管理" name="second">
        <div style="padding-left: 50px">
          <div v-for="item in ablums" :key="item.id">
            <h3>{{ item.albumType }}：</h3>
            <div class="uplDiv" @click="getAlbumIndex(item.id)">
              <el-upload
                action="http://localhost:8200/hou/upload/pic"
                list-type="picture-card"
                :on-preview="handlePictureCardPreview"
                :on-success="handleAvatarSuccess"
                :on-remove="handleRemove"
              >
                <i class="el-icon-plus" />
              </el-upload>
              <el-dialog :visible.sync="dialogVisible">
                <el-input v-model="ruleForm.imageUrl[item.id]" hidden />
                <img width="100%" :src="ruleForm.imageUrl" alt="">
              </el-dialog>
            </div>
          </div>
        </div>
      </el-tab-pane>
    </el-tabs>
    <div align="center">
      <el-button slot="reference" type="warning" size="mini" @click="submitForm('ruleForm')">提交</el-button>
    </div>

    <el-dialog
      :visible.sync="dialogVisible"
      width="30%"
    >
      <span>当前图片未上传，是否上传图片</span>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="toUpload">确 定</el-button>
      </span>
    </el-dialog>

    <el-dialog
      :visible.sync="mapDialog"
      width="70%"
    >
      <baidu-map class="bm-view" ak="ZoBKG4QXIkp2a6gdXPd2rQYf2dme8558" :center="center" :zoom="zoom" @ready="handler">
        <bm-scale anchor="BMAP_ANCHOR_TOP_RIGHT" />
        <bm-navigation anchor="BMAP_ANCHOR_TOP_RIGHT" />
        <bm-marker :position="{lng: 116.404, lat: 39.915}" :dragging="true" @dblclick="getIndex">
          <bm-label content="双击选择" :label-style="{color: 'red', fontSize : '24px'}" :offset="{width: -35, height: 30}" />
        </bm-marker>
        <bm-city-list anchor="BMAP_ANCHOR_TOP_LEFT" />
      </baidu-map>
    </el-dialog>
  </div>
</template>

<script>

import BaiduMap from 'vue-baidu-map/components/map/Map.vue' // 百度地图组件
import BmMarker from 'vue-baidu-map/components/overlays/Marker' // 点
import BmScale from 'vue-baidu-map/components/controls/Scale' // 缩放
import BmNavigation from 'vue-baidu-map/components/controls/Navigation' // 比例尺
import BmCityList from 'vue-baidu-map/components/controls/CityList' // 城市列表

import axios from 'axios'

export default {
  name: 'RealEstateList',
  components: {
    BaiduMap,
    BmMarker,
    BmScale,
    BmNavigation,
    BmCityList
  },
  data() {
    return {
      center: { lng: 0, lat: 0 },
      zoom: 3,

      mapDialog: false,
      dialogVisible: false,
      visible: false,
      albumIndex: '',
      delPtS: [],
      ruleForm: {
        longItude: '',
        latItude: '',
        property: [],
        subways: [],
        imageUrl: [],
        sq: [],
        buildingTypes: [],
        premisesTypes: [],
        subwayStatus: [{
          value: '',
          content: '',
          key: '',
          type: 1
        }],
        domains: [{
          value: '',
          content: '',
          key: '',
          type: 0
        }]
      },
      subwayList: [],
      circleList: [],
      characterList: [],
      slist: [],
      citys: [],
      countrys: [],
      pageInfo: {
        sid: '',
        cid: '',
        did: ''
      },
      ablums: [],
      activeName: 'first',
      rules: {
        name: [
          { required: true, message: '请输入楼盘名称', trigger: 'blur' }
        ],
        address: [
          { required: true, message: '请输入楼盘地址', trigger: 'change' }
        ],
        province: [
          { required: true, message: '请选择省份', trigger: 'change' }
        ],
        city: [
          { required: true, message: '请选择城市', trigger: 'change' }
        ],
        county: [
          { required: true, message: '请选择地区', trigger: 'change' }
        ]
      }
    }
  },
  created() {
    axios.get('http://localhost:8200/sys/region/getArea?pid=' + 1).then((response) => {
      this.slist = response.data.obj
      console.log('slist:{}' + JSON.stringify(this.slist))
    })
    this.getCharacteristic()
    this.getAlbum()
  },
  methods: {
    getMapIndex(e) {
      // console.log(e)
    },
    getIndex(e) {
      console.log('经度:' + e.point.lng)
      console.log('纬度:' + e.point.lat)
      this.ruleForm.longItude = e.point.lng
      this.ruleForm.latItude = e.point.lat
      this.mapDialog = false
      this.$message({
        message: '选择成功',
        type: 'success'
      })
      /* console.log("type:"+type)
      console.log("target:"+target)
      console.log("lat:"+point.lat)
      console.log("pixel:"+pixel)*/
    },
    handler({ BMap, map }) {
      console.log(BMap, map)
      this.center.lng = 116.404
      this.center.lat = 39.915
      this.zoom = 15
    },
    toUpload() {
      this.activeName = 'second'
      this.dialogVisible = false
    },
    getAlbumIndex(index) {
      this.albumIndex = index
    },
    getAlbum() {
      axios.post('http://localhost:8200/sys/album/type/list').then(res => {
        this.ablums = res.data
        console.log('图片类型：' + JSON.stringify(this.ablums))
      })
    },
    removeSubway(item) {
      var index = this.ruleForm.subwayStatus.indexOf(item)
      if (this.ruleForm.subwayStatus.length <= 1) {
        this.$message({
          message: '请至少保留一条',
          type: 'warning'
        })
        return
      }
      if (index !== -1) {
        this.ruleForm.subwayStatus.splice(index, 1)
      }
    },
    /**
     * 交通情况
     *
     * */
    addSubway() {
      this.ruleForm.subwayStatus.push({
        value: '',
        content: '',
        key: Date.now(),
        type: 1
      })
    },
    removeDomain(item) {
      var index = this.ruleForm.domains.indexOf(item)
      if (this.ruleForm.domains.length <= 1) {
        this.$message({
          message: '请至少保留一条',
          type: 'warning'
        })
        return
      }
      if (index !== -1) {
        this.ruleForm.domains.splice(index, 1)
      }
    },
    /**
     * 周边配套
     */
    addDomain() {
      this.ruleForm.domains.push({
        value: '',
        content: '',
        key: Date.now(),
        type: 0
      })
    },

    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          // alert(JSON.stringify(this.ruleForm.imageUrl))
          if (this.ruleForm.imageUrl.length <= 0) {
            // this.dialogVisible=true;
            this.$confirm('当前未上传图片, 是否继续?', {
              confirmButtonText: '上传图片',
              cancelButtonText: '继续添加',
              type: 'warning'
            }).then(() => {
              this.activeName = 'second'
            }).catch(() => {
              axios.post('http://localhost:8200/sys/pre/insert', this.ruleForm).then(res => {
                // alert(JSON.stringify(res))
                if (res.data.code === '200') {
                  /* this.$message({
                    message: res.data.msg,
                    type: 'success'
                  });*/
                  alert(res.data.msg)
                  location.reload()
                } else {
                  this.$message({
                    message: res.data.msg,
                    type: 'error'
                  })
                }
              })
            })
          } else {
            axios.post('http://localhost:8200/sys/pre/insert', this.ruleForm).then(res => {
              // alert(JSON.stringify(res))
              if (res.data.code === '200') {
                /* this.$message({
                  message: res.data.msg,
                  type: 'success'
                });*/
                alert(res.data.msg)
                location.reload()
              } else {
                this.$message({
                  message: res.data.msg,
                  type: 'error'
                })
              }
            })
          }
          console.log(this.ruleForm)
        } else {
          this.$message({
            message: '请输入!',
            type: 'error'
          })
          return false
        }
      })
    },
    resetForm(formName) {
      this.$refs[formName].resetFields()
    },
    handleRemove(file, fileList) {
      console.log(file, fileList)
    },
    handlePictureCardPreview(file) {
      console.log(file)
    },
    shch() {
      this.citys = []
      axios.get('http://localhost:8200/sys/region/getArea?pid=' + this.ruleForm.province).then((response) => {
        this.citys = response.data.obj
        console.log('city:{}' + JSON.stringify(this.citys))
      })
    },
    quch() {
      this.countrys = []
      axios.get('http://localhost:8200/sys/region/getArea?pid=' + this.ruleForm.city).then((response) => {
        this.countrys = response.data.obj
        console.log('countrys:{}' + JSON.stringify(this.countrys))
      })
      this.handleSubway()
    },
    handleCircle() {
      axios.get('http://localhost:8200/sys/pre/businessCircleList?country=' + this.ruleForm.county).then(res => {
        this.circleList = res.data
        console.log('商圈：' + JSON.stringify(res))
      })
    },
    handleSubway() {
      const id = this.ruleForm.province
      // 根据数据库ID
      if (id !== 2 && id !== 3 && id !== 10 && id !== 23) {
        this.getSub(this.ruleForm.city)
      } else {
        this.getSub(id)
      }
    },
    getSub(id) {
      axios.get('http://localhost:8200/sys/pre/getSubwayList?city=' + id).then(res => {
        this.subwayList = res.data
        console.log('地铁：' + JSON.stringify(res))
      })
    },
    handleAvatarSuccess(res, file) {
      if (res.code === '200') {
        this.$message({
          message: res.msg,
          type: 'success'
        })
        console.log(res)
        // 上传成功返回地址
        const fileObj = {
          id: this.albumIndex,
          url: res.obj,
          name: 'file'
        }
        this.ruleForm.imageUrl.push(fileObj)
      } else {
        this.$message({
          message: res.msg,
          type: 'error'
        })
      }
    },
    comeBack() {
      this.$router.push('/modules/sys/inputDistributed')
    },
    getCharacteristic() {
      axios.get('http://localhost:8200/sys/premises/property/getListAll').then(res => {
        this.characterList = res.data
        console.log('楼盘特色：' + JSON.stringify(res))
      })
    }
  }
}

</script>
<style>
.uplDiv{
  padding-left: 90px;
}
.Lpinput{
  width: 200px;
}
.el-uploader .el-upload {
  border: 1px dashed #E6A23C;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.el-input{
  width: 400px;
}
.el-upload:hover {
  border-color: #E6A23C;
}
.el-upload {
  font-size: 28px;
  color: #E6A23C;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}
.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
/**
必须设置宽高
 */
.bm-view {
  width: 100%;
  height: 900px;
}
</style>
